<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link href="../style/fjol_style.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../style/xol_style.css"/>
    <link href="../css/iosSelect.css" rel="stylesheet" />
    <link href="../css/mui.picker.min.css" rel="stylesheet" />
    
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    	
   		
    </script>
	</head>
	<style>
		.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
			margin-right: 10px;
			width: 50%;
		}
		.mui-input-row .mui-input-clear~.mui-icon-clear, .mui-input-row .mui-input-password~.mui-icon-eye, .mui-input-row .mui-input-speech~.mui-icon-speech{
			width: 30px;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav newbgRed">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">发布房源</h1>
		</header>
		<div class="mui-content">
		    <div class="mui-scroll-wrapper" style="bottom: 40px; top: 40px;">
		        <div class="mui-scroll">
		            <!--这里放置真实显示的DOM内容-->
		            <div class="mui-input-group mt5">
					    <div class="mui-input-row">
					        <label>姓名</label>
					        <input type="text" id="realname" class="mui-input-clear mui-text-right" value="" placeholder="怎么称呼您？">
					    </div>
					    <div class="mui-input-row">
					        <label>手机号</label>
					        <input type="number" id="mobile" class="mui-input-clear mui-text-right" value="" placeholder="必填">
					    </div>
					</div>
		            
		            <div class="mui-input-group mt10">
		            	<div class="mui-table-view-cell">
	                        <a class="mui-navigate-right" id="searchBuilding">
	                     位置
	                    		<span class="mui-pull-right mr10"></span>
	                		</a>
	                    </div>
		            	<div class="mui-input-row">
					        <label>楼栋号</label>
					        <input type="text" id="buildNumber" class="mui-input-clear mui-text-right" placeholder="" value="">
					    </div>
					    <div class="mui-input-row">
					        <label>门牌号</label>
					        <input type="text" id="number" class="mui-input-clear mui-text-right" placeholder="" value="">
					    </div>
					    <div class="mui-input-row" id="houseType">
					        <label>户型</label>
					        <input type="text" class="mui-text-right" placeholder="" value="1室0厅0卫">
					    </div>
					    <div class="mui-input-row">
					        <label>房屋类型</label>
					        <input type="text" readonly id="buildType" class="mui-input-clear mui-text-right" value="">
					    </div>
					    <div class="mui-input-row">
					        <label>装修程度</label>
					        <input type="text" readonly id="decorationType" class="mui-input-clear mui-text-right" value="">
					    </div>
					    <div class="mui-input-row">
					        <label>面积</label>
					        <span class="mui-pull-right p10 mt10">平方</span>
					        <input type="number" id="square" class="mui-input-clear mui-text-right mui-pull-right" style="width: 55%;" placeholder="" value="">
					    </div>
					    <div class="mui-input-row" id="housePrice">
					        <label>租金</label>
					        <span class="newRed mui-pull-right p10 mt10">万</span>
					        <input type="text" id="sellPrice" class="mui-input-clear mui-text-right" value="">
					    </div>
					</div>
		            
		        </div>
		    </div>
		    <nav class="mui-bar mui-bar-tab" style="background: none; box-shadow: none;">
		    	<button type="button" class="mui-btn newbgRed colorWhite mui-btn-block pct80 mauto borderRadius6" id="submitIssue">确认发布</button>
		    </nav>
		</div>
		<script src="../css/iosSelect.js"></script>
		<script src="../js/md5.js"></script>
		<script src="../js/common.util.js"></script>
		<script src="../js/network.js"></script>
		<script src="../js/enum.util.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/xzx.open.js"></script>
		<script>
			mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});
		
		document.querySelector('#searchBuilding').addEventListener('tap',function(){
			openWindowWithPage('search_building',{
				parentId:'fj_house_appraisal'
			});
			
		});
		var type=1;
		mui.plusReady(function(){
			var wv = plus.webview.currentWebview();
			type = wv.type;
//			console.log(type);
			var userInfo = common.myStorage.getItem('userInfo');
			if(userInfo){
//				console.log(userInfo);
				document.querySelector('#realname').value = userInfo.realname;
				document.querySelector('#mobile').value = userInfo.mobile;
			}
			if(type==1){
				document.querySelector('.mui-title').innerHTML = '发布房源';
				document.querySelector('#housePrice label').innerHTML = '售价';
				document.querySelector('#housePrice span').innerHTML = '万';
			}else if(type==2){
				document.querySelector('.mui-title').innerHTML = '出租房屋';
				document.querySelector('#housePrice label').innerHTML = '租金';
				document.querySelector('#housePrice span').innerHTML = '元/月';
			}
			//户型
			var buildingId=null;
			var bedRoomNumber=1,livingRoomNumber=0,toiletNumber=0;
			
			var houseType = document.querySelector('#houseType');//房型
			
			var bedRoomData = [{
				'id':'1',
				'value':'1室'
			}];
			var livingRoomData = [{
				'id':'0',
				'value':'厅'
			}];
			var toiletRoomData = [{
				'id':'0',
				'value':'卫'
			}];
			for (var i=0; i<10; i++) {
				bedRoomData[i]={
					'id':i+1,
					'value':i+1+'室'
				};
				if(i==9){
					bedRoomData[i]={
						'id':i+1,
						'value':'10室及以上'
					}
				}
			}
			for (var i=0; i<=10; i++) {
				livingRoomData[i]={
					'id':i,
					'value':i+'厅'
				};
				if(i==10){
					livingRoomData[i]={
						'id':i,
						'value':'10厅及以上'
					}
				}
				toiletRoomData[i]={
					'id':i,
					'value':i+'卫'
				};
				if(i==10){
					toiletRoomData[i]={
						'id':i,
						'value':'10卫及以上'
					}
				}
			}
			
			houseType.addEventListener('tap', function () {
				
		    var sanguoSelect = new IosSelect(3, 
		        [bedRoomData,livingRoomData, toiletRoomData],
		        {
		            title: '选择户型',
		            itemHeight: 35,
		            callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
		                bedRoomNumber = selectOneObj.value;
		                livingRoomNumber = selectTwoObj.value;
		                toiletNumber = selectThreeObj.value;
		                document.querySelector('#houseType input').value = selectOneObj.value+selectTwoObj.value+selectThreeObj.value;
		            }
				});
			});
			//楼盘名称
			document.addEventListener('getBuilding',function(event){
				buildingId = event.detail.buildingId;
				var buildingName = event.detail.buildingName;
//				console.log(buildingId);
				document.querySelector('#searchBuilding span').innerHTML = buildingName;
			});
			//房源类型
			var _houseType = {
				name:'商业住房',
				value:1
			}
			var enumHousTypeArray = enumUtils.getEnumDataByType('houseType');
			document.querySelector('#buildType').value = enumHousTypeArray[0].name;
			document.querySelector('#buildType').addEventListener('tap', function() {
				
//				console.log(JSON.stringify(enumHousTypeArray));
				var houseTypeArray = new Array();
				for(i in enumHousTypeArray) {
					houseTypeArray[i] = {
						text: enumHousTypeArray[i].name,
						value: enumHousTypeArray[i].value
					}
				}
				var houseTypePicker = new mui.PopPicker();
				houseTypePicker.setData(houseTypeArray);
				houseTypePicker.pickers[0].setSelectedIndex(_houseType.value - 1);
				houseTypePicker.show(function(SelectedItem) {
					_houseType.name = SelectedItem[0].text;
					_houseType.value = SelectedItem[0].value;
					document.querySelector('#buildType').value = SelectedItem[0].text;
				});
			});
			
			//装修类型
			var _decorationType = {
				name:'精装修',
				value:1
			}
			var enumdecorationTypeArray = enumUtils.getEnumDataByType('decorationType');
			document.querySelector('#decorationType').value = enumdecorationTypeArray[0].name;
			document.querySelector('#decorationType').addEventListener('tap', function() {
				
//				console.log(JSON.stringify(enumdecorationTypeArray));
				var houseTypeArray = new Array();
				for(i in enumdecorationTypeArray) {
					houseTypeArray[i] = {
						text: enumdecorationTypeArray[i].name,
						value: enumdecorationTypeArray[i].value
					}
				}
				var houseTypePicker = new mui.PopPicker();
				houseTypePicker.setData(houseTypeArray);
				houseTypePicker.pickers[0].setSelectedIndex(_decorationType.value - 1);
				houseTypePicker.show(function(SelectedItem) {
					_decorationType.name = SelectedItem[0].text;
					_decorationType.value = SelectedItem[0].value;
					document.querySelector('#decorationType').value = SelectedItem[0].text;
				});
			});
			
			
			//提交
			document.querySelector('#submitIssue').addEventListener('tap',function(){

				var square = document.querySelector('#square').value;//面积

				var realname = document.querySelector('#realname').value;//姓名
				var mobile = document.querySelector('#mobile').value;//手机号
				
				var sellPrice = document.querySelector('#sellPrice').value;	//售价
				
				if(buildingId==null){
					buildingId = -1;
				}
//				if(square==''||isNaN(square)){
//					mui.alert('请填写房屋面积');
//					return false;
//				}
				if(isNaN(square)){
					document.querySelector('#square').value = '';
					return false;
				}
				if(realname==''){
					mui.alert('请留下您的真实姓名，以便我们称呼您');
					return false;
				}
				if(mobile==''){
					mui.alert('请留下您的手机号，以便我们联系您');
					return false;
				}else if(!(/^1\d{10}$/.test(mobile))){
						mui.alert('请填写正确的手机号，以便我们联系您');
						return false;
				}
					var param = [{
						key:'realname',
						value:realname
					},{
						key:'mobile',
						value:mobile
					}];
					fjNetwork.post('fjzx/client/add-house-publish.json',param,function(data){
//						console.log(JSON.stringify(data));
						mui.toast('您的房源数据已经提交，我们将第一时间与您联系，请耐心等待');
						setTimeout(function(){
							mui.back();
						},1500);
					},function(msg){
//						console.log(msg);
						mui.toast(msg);
					});
				
			});
		
		});
		</script>
	</body>
</html>
